<template>
	<view class="jishi">
		<!-- 轮播图 -->
		<view class="mainpadding">
			<u-swiper :list="list5" indicatorMode="dot" :indicator="true" height="100" @click="bannerclick"></u-swiper>
		</view>
		<!-- 头部 -->
		<scroll-view class="swiper" scroll-x="true" scroll-left="120" >
			<view class=" flexleft swiperpadding">
				<view class="tbbox flexcolumn" @click="ersxz(item)" v-for="item in listtop" :key="item.id">
					<view class="tbtupian">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="nostrongtext">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
		<!-- 内容 -->
		<view :class="item.check_status==4?'neirong bgakground-posi':'neirong'" v-for="item in list.data" :key="item.id" @click="shijixq(item.id)">
			<view class="mainpadding">
				<!-- 头像 -->
				<view class="flexleft">
					<view class="touxiang margin_right3">
						<image :src="item.user.avatar" mode=""></image>
					</view>
					<view class="txt strongtext margin_right3">{{item.username}}</view>
					<view class="zhiding" v-show="item.top_status==1">置顶</view>
				</view>
				<!-- 文本 -->
				<view class="margin_top txt" style="line-height: 40rpx;">
					<text>{{item.name + " " + item.content.replace(/[\r\n]/g, "")}}</text>
				</view>
				<!-- 照片 -->
				<view class="lablephoto margin_top flexleft" v-show="item.images.length && item.show==false"
					@click.stop="showimage(item)">
					<view class="photo margin_right1"></view>
					<view>{{item.images.length}}张照片</view>
				</view>
				<!-- 图片合集 -->
				<view class="flexleft flex_wrap" v-show="item.show">
					<view class="proview_images margin_top" v-for="ite in item.images" :key="ite">
						<image :src="ite" mode=""></image>
					</view>
				</view>
				<!-- 底部围观 -->
				<view class="zuiyoubian margin_top flexleft">
					<view class="lablecolor margin_right3">#{{item.topic.name}}</view>
					<!-- <view class="smalltext">{{item.createtime | formatDate('-')}}</view> -->
					<view class="smalltext margin_right3">{{item.createtime_text}}</view>
					<view class="huisetext">{{item.view_count}}人围观</view>
				</view>
			</view>
		</view>
		<!-- 加号 -->
		<!-- <view @click="fbshow = true"> -->
		<replacebtn :info="{replace:true,news:false,jishi:false}"></replacebtn>
		<!-- </view> -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				fbshow: false,
				// 集市分类
				listtop: [],
				//集市列表
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				list5: [],
				list6:[],
				flag: true,
				userstatus:'',
				succ:'',
				succ1:'',
				succ2:'',
				succ3:'',
				num:'',
			}
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				let maohao = ':'
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${month}${spe}${day}  ${h}${maohao}${mm}`;
			}
		},
		onLoad(options) {
			console.log(options)
			let _this = this;
			this.jsflist()
			this.getbanner();
			if(options.school_id){
				uni.setStorage({
					key:'school_id',
					data:options.school_id,
					success() {
						this.school_id = options.school_id
						_this.jsflist()
						_this.getbanner()
					}
				})
			}
			
		},
		onShow() {
			this.init()
			this.mypage()
		},
		methods: {
			onPullDownRefresh(){
				this.jsflist()
				this.getbanner()
				this.init()
				this.mypage()
			},
			mypage() {
				httpRequest.request('user/index', 'POST', {}, false, false, true).then(res => {
					if(this.userstatus == 'hidden'){
						uni.showModal({
							title:'您已被封号！',
							content:"是否立即申诉？",
							showCancel:false,
							success(res) {
								if(res.confirm){
									uni.navigateTo({
										url:'/pages/wode/shensu'
									})
								}
							}
						})
					}
					if(res.code == 1){
						this.userstatus = res.data.userinfo.status
						this.succ3 = 1
						this.checkpull()
					}
				})
			},
			checkpull(){
				if(this.succ == 1 && this.succ1 == 1 && this.succ2 == 1 && this.succ2 == 1){
					uni.stopPullDownRefresh()
				}
			},
			// 获取轮播数据
			getbanner(){
				httpRequest.request('banner/lists', 'POST', {
				}, false, false, true).then(res => {
					if(res.code == 1){
						console.log(res,5656);
						this.checkpull()
						this.succ1 = 1
						let bannerarr = []
						let bannerurl = []
						res.data.forEach(item=>{
							bannerarr.push(item.thumb_image)
							bannerurl.push(item.minapp_url)
						})
						this.list5 = bannerarr
						this.list6 = bannerurl
					}
					
				})
			},
			bannerclick(index){
				console.log("点击了第",index,"张图片")
				let url = this.list6[index]
				uni.navigateTo({
					url:"/pages/webview/webview?url="+url
				})
			},
			// 展示图片
			showimage(item) {
				item.show = true
			},
			//集市列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('forum/lists', 'POST', {
					page: page || 1,
					limit: _this.limit,
					// school_id:_this.school_id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.succ2 = 1;
						this.checkpull();
						let resList = res.data;
						let dataList = _this.list;
						res.data.data.forEach(item => {
							Object.assign(item, {
								show: false
							})
						})
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			//集市头部
			jsflist() {
				httpRequest.request('topic/lists', 'POST', {
					// 传参
				}, false, false, true).then(res => {
					if(res.code == 1){
						console.log(res,555)
						// this.widely = res.data.length * 65
						this.listtop = res.data
						this.succ = 1;
						this.checkpull();
					}
					
				})
			},
			fbopen() {
				// console.log('open');
			},
			fbclose() {
				this.fbshow = false
				// console.log('close');
			},
			//跳转二手闲置
			ersxz(item) {
				uni.navigateTo({
					url: '/pages/jishi/ershouxianzhi?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//集市详情
			shijixq(id) {
				let msg = {
					detailid: id, //列表id
					plid: "" //评论id
				}
				uni.navigateTo({
					url: '/pages/jishi/xiangqingsj?idjpp=' + encodeURIComponent(JSON.stringify(msg))
				})
			},
			//跳转发布页面
			tzdabu() {
				uni.navigateTo({
					url: '/pages/jishi/xinxifabu'
				})
			},
			//跳转其他社区
			tzqtadiq() {
				uni.navigateTo({
					url: '/pages/jishi/qitadiqu'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.indicator {
	        @include flex(row);
	        justify-content: center;
	
	        &__dot {
	             height: 6px;
	             width: 6px;
	             border-radius: 100px;
	             background-color: rgba(255, 255, 255, 0.35);
	             margin: 0 5px;
	             transition: background-color 0.3s;
	    
	            &--active {
	                 background-color: #ffffff;
	             }
	        }
	    }
	
	    .indicator-num {
	        padding: 2px 0;
	        background-color: rgba(0, 0, 0, 0.35);
	        border-radius: 100px;
	        width: 35px;
	        @include flex;
	        justify-content: center;
	
	        &__text {
	             color: #FFFFFF;
	             font-size: 12px;
	         }
	    }
	.bgakground-posi{
		background-image: url("@/static/image/system/over.png");
		background-position: 90% 35%;
		background-repeat: no-repeat;
		background-size: 170rpx 140rpx;
	}
	.neirong {
		padding: 0 30rpx;
		border-bottom: 1rpx solid rgba(235, 235, 235, 0.6);
	}

	.zhiding {
		border-radius: 5rpx;
		padding: 5rpx 10rpx;
		background-color: #000000;
		font-size: 24rpx;
		font-family: MicrosoftYaHei-Bold-, MicrosoftYaHei-Bold;
		font-weight: normal;
		color: #FFFFFF;
	}

	.lablecolor {
		font-size: 20rpx;
		font-family: MicrosoftYaHei-, MicrosoftYaHei;
		font-weight: normal;
		color: #2ACC9C;
	}

	.proview_images {
		width: 110rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
</style>
<style lang="scss" scoped>
	.tbbox {
		margin-right: 56rpx;
	}

	.jiahaobox {
		position: fixed;
		bottom: 280rpx;
		right: 30rpx;
	}

	.jiahao {
		width: 81rpx;
		height: 81rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/jiahao.png');
	}

	.uni-swiper-slides {
		display: flex;
		align-items: center;

	}

	.overflow_hidden {
		max-width: 350rpx;
		overflow: hidden;
		/* 限制一行显示 */
		white-space: nowrap;
		/* 显示不下省略号显示 */
		text-overflow: ellipsis;
	}

	//发布弹出层
	.fufeibtn {
		width: 293rpx;
		height: 77rpx;
		display: flex;
		margin: 30rpx auto 0;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #2ACEB0;
		align-items: center;
		justify-content: center;
		background: rgba(42, 204, 156, .2);
		border-radius: 20rpx;
	}

	.dafabbtn {
		margin: auto;
		width: 289rpx;
		height: 77rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #2ACC9C;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #2ACC9C;
	}

	.bgc {
		margin-bottom: 26rpx;
		background-image: url('@/static/image/system/bgc.png');
		background-size: 100% 100%;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		padding: 24rpx 44rpx;
		color: #2ACC9C;
	}

	/deep/.u-popup__content {
		width: 80%;
	}

	.huanhang {
		flex-wrap: wrap;
		margin-top: 40rpx;
	}

	.fbbtn {
		margin-bottom: 26rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		padding: 24rpx 44rpx;
		border: 1rpx solid #999999;
		border-radius: 20rpx;
	}
	.txt{
		font-size: 32rpx;
	}
	.tanchuc {
		padding: 30rpx 60rpx 60rpx;
	}

	.chengsebtn {
		color: #FEB57F;
		background: rgba(254, 181, 127, .1);
	}

	.hongsebtn {
		background: rgba(253, 121, 112, .1);
		color: #FD7970;
	}

	.huangsebtn {
		background: rgba(253, 209, 130, .1);
		color: #FDD182;
	}

	.huisetext {
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	.rt {
		margin-left: 30rpx;
	}

	.zisebtn {
		color: #5179FA;
		background: rgba(81, 121, 250, .1);
	}

	.lvsebtn {
		color: #2ACC9C;
		background: rgba(0, 232, 190, .1);
	}

	.allbtn {
		margin-top: 18rpx;
		width: 77rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.touxiang {
		width: 99rpx;
		height: 99rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}
	.swiperpadding{
		// padding: 0 30rpx;
		// margin-left: 30rpx;
	}
	.swiper {
		margin: 0 auto;
		height: 120rpx;
		width: 100%;
		white-space: nowrap;
		width: 92vw;
	}

	.tbtupian {
		width: 80rpx;
		height: 80rpx;
		margin: auto;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}
</style>
